*{
	padding: 0;
	margin: 0;
}
html,body{
  height: 100%;
}
body:before, body:after {
  content: "";
  display: block;
  height: 50%;
  background: #00bdea;
}
body:after {
  background: #208FF9;
}
#container{
  position: absolute;
  top:100px;
  left:100px;
}
#small-pic{
  width: 400px;
  height: 400px;
  margin-right: 5px;
  overflow: hidden;
  position: relative;
  margin-bottom: 10px;
  float:left;
}
#small-pic span{
  background: url(../img/T12pdtXaldXXXXXXXX-2-2.png) repeat scroll 0 0 transparent;
  width: 178px;
  height: 178px;
  display: none;
  position: absolute;
}

#small-pic:hover{
	cursor: move;
}
#big-pic{
  width: 400px;
  height: 400px;
  background-color: green;
  float: left;
  display: none;
  overflow: hidden;
  position: relative;
}
#big-pic img{
  position: absolute;
  top:-25px;
}
ul{
  list-style-type: none;
  clear: both;
  overflow: hidden;
}
li{
	float: left;
	margin-right: 5px;
}
li a{
	display: inline-block;
	box-sizing:border-box;
	height: 50px;
	width: 50px;
}
li.choosed img{
	border:1px solid #000;

}